<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
        font-size: 30px;
    }
    body,html{
        width: 100%;
        height: 100%;
    }
    .mask{
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:rgba(0, 0, 0, .3)
    }
    .reg{
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 300px;
        height: 300px;
        border: 1px solid #000000;
        background-color:#666666;
    }
</style>
<body>
    <a href="#">注册</a>
    <div class="mask"></div>
    <div class="reg"></div>
</body>
<script>
    var zhu = document.querySelector('a')
    var mask = document.querySelector('.mask')
    var reg = document.querySelector('.reg')

    zhu.onclick = function(event){
        event = event || window.event
        mask.style.display = 'block';
        reg.style.display = 'block';

        if(event.stopPropagation){
            event.stopPropagation()
        }else{
            event.cancelBubble = true
        }

    }
    document.onclick=function(){
        mask.style.display = 'none';
        reg.style.display = 'none';
    }
</script>
</html>